<template>
    <el-container style="height: 100vh;">
        <el-aside width="200px" class="aside">
            <el-menu :default-active="activeMenu" class="sidebar" @select="handleMenuSelect">
                <el-menu-item index="1" class="menu-item">仪表盘</el-menu-item>
                <el-menu-item index="2" class="menu-item">用户管理</el-menu-item>
                <el-menu-item index="3" class="menu-item">产品管理</el-menu-item>
                <el-menu-item index="4" class="menu-item">订单管理</el-menu-item>
            </el-menu>
        </el-aside>

        <el-container style="width: 100%;">
            <el-header class="header">
                <h2>后台管理系统</h2>
                <el-button @click="handleLogout" type="warning" style="float: right;">注销</el-button>
            </el-header>

            <el-main>
                <h3>{{ currentMenu }}</h3>
                <p>登录用户: {{ mainStore.userName }}</p>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useMain } from '@/store/home';
import { useRouter } from 'vue-router';

const router = useRouter();
const mainStore = useMain();
const activeMenu = ref('1'); 
const currentMenu = ref('仪表盘');

const handleMenuSelect = (index: string) => {
    activeMenu.value = index;
    switch (index) {
        case '1':
            currentMenu.value = '仪表盘';
            break;
        case '2':
            currentMenu.value = '用户管理';
            break;
        case '3':
            currentMenu.value = '产品管理';
            break;
        case '4':
            currentMenu.value = '订单管理';
            break;
    }
};

// 处理注销
const handleLogout = () => {
    console.log('用户注销');
    router.push({path: '/login'})
};
</script>

<style scoped>
.aside {
    background-color: #2c3e50;
    color: #ecf0f1;
    width: 200px; /* 侧边栏的固定宽度 */
}

.header {
    background-color: #34495e;
    color: #ecf0f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex: 0 0 auto; /* 固定header大小 */
}

.el-main {
    flex: 1; 
    overflow-y: auto;
}

.sidebar .el-menu-item {
    color: #ecf0f1;
}

.sidebar .el-menu-item:hover {
    background-color: #1abc9c;
}

.sidebar .el-menu-item.is-active {
    background-color: #16a085;
}

h2 {
    margin: 0;
}

h3 {
    margin: 20px 0;
}
</style>